<template>
  <div style="width:80%;margin-left:10%">
    <Row>
      <Col span="20">  .</Col>
      <Col span="4"><Button type="primary"
            @click="showModal = true">创建用户</Button></Col>
    </Row>
    
    <Table :columns="columns7"
           :data="data6"></Table>
    
    <Modal v-model="showModal"
           title="新建用户"
           @on-ok="ok"
           @on-cancel="cancel">
      <Row>
        <Col span="12">请输入用户名</Col>
        <Col span="12"><Input v-model="username"
               placeholder="username"
               clearable
               style="width: 200px" /></Col>
      </Row>
      <Row>
        <Col span="12">请输入用户昵称(可为空)</Col>
        <Col span="12"><Input v-model="nick"
               placeholder="nick"
               clearable
               style="width: 200px" /></Col>
      </Row>
      <Row>
        <Col span="12">请输入用户的默认密码</Col>
        <Col span="12"><Input v-model="password"
               placeholder="time"
               clearable
               style="width: 200px" /></Col>
      </Row>
    </Modal>
  </div>
</template>


<script>
export default {
  data() {
    return {
      username: "",
      nick: "",
      password: "",
      showModal: false,
      columns7: [
        {
          title: "用户名",
          key: "username",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.username)
            ]);
          }
        },
        {
          title: "昵称",
          key: "nickname"
        },
        {
          title: "密码",
          key: "password"
        },
        {
          title: "管理",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "View"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "Delete"
              )
            ]);
          }
        }
      ],
      data6: [
        
      ]
    };
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `username：${this.data6[index].username}<br>nick：${
          this.data6[index].nick
        }<br>time：${this.data6[index].time}`
      });
    },
    remove(index) {
      this.$Modal.confirm({
        title: "是否删除所选内容",
        content: "<p>点击确定进行删除</p>",
        onOk: () => {
          this.handleDelete(index);
        },
        onCancel: () => {
          this.$Message.info("删除已取消");
        }
      });
      
    },
    handleDelete(index)
    {
      var url = "user/delete";
      this.$axios
        .post(
          url,
          {
            "id": this.data6[index].id,
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.data6.splice(index, 1);
          this.$Message.info("删除成功");
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("服务器繁忙");
        });
      
    },
    ok() {
      var url = "user/add";
      this.$axios
        .post(
          url,
          {
            "username": this.username,
            "nickname": this.nick,
            "academy": this.$store.getters.getUser.academy,
            "password": this.password
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.getUserList(); 
          this.$Message.info("添加成功");
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("服务器繁忙");
        });
      this.$Message.info("Clicked ok");
      this.getUserList();
    },
    cancel() {
      this.$Message.info("Clicked cancel");
    },
    getUserList(){
      let url =  "/user/list";
      this.$axios
        .post(
          url,
          {
            "academy": this.$store.state.user.academy,
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.data6 = response.data.list
          console.log(this.data6);
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("服务器繁忙");
        });
    }
  },
  mounted() {
    this.getUserList(); 
  },
  created(){
    
  }
};
</script>


<style scoped>
.modal_font {
  font-size: 30px;
}
</style>